<template>
  <!-- 对话框 -->
  <Modal ref="modalRef" @register="modalForm" @confirm="okModal">
    <template #default>
      <Form @register="dataForm" />
    </template>
  </Modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Modal, useModal } from '@/design/components/Modal';
  import { Form, useForm, FormSchema } from '@/design/components/Form/index';
  import { ElMessage } from 'element-plus';
  import api from '@/api/system/dept';

  // 组件属性
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    record: {
      type: Object,
      default: () => ({}),
    },
  });

  // 获取表单标题
  const title = ref(props.title);

  // 表单项
  const schemas: FormSchema[] = [
    {
      field: 'name',
      component: 'Input',
      label: '部门名称',
      componentProps: {
        placeholder: '请输入部门名称',
      },
      rules: [{ required: true, message: '请输入部门名称', trigger: ['blur'] }],
    },
    {
      field: 'code',
      component: 'Input',
      label: '部门编码',
      componentProps: {
        placeholder: '请输入部门编码',
      },
      rules: [{ required: true, message: '请输入部门编码', trigger: ['blur'] }],
    },
    {
      field: 'parentId',
      component: 'Input',
      label: '上级部门',
      componentProps: {
        placeholder: '请选择',
      },
    },
    {
      field: 'sort',
      component: 'InputNumber',
      label: '排序',
      defaultValue: 0,
      componentProps: {
        controlsPosition: 'right',
        placeholder: '数字越大，排名越靠前',
      },
    },
    {
      field: 'status',
      component: 'RadioGroup',
      label: '状态',
      defaultValue: 1,
      componentProps: {
        options: [
          {
            label: '正常',
            value: 1,
          },
          {
            label: '禁用',
            value: 0,
          },
        ],
      },
    },
    {
      field: 'note',
      component: 'Input',
      label: '备注',
      componentProps: {
        type: 'textarea',
        placeholder: '请输入备注',
      },
    },
  ];

  // 设置弹窗
  const [modalForm, { openModal, closeModal, setSubLoading, setProps }] = useModal({
    title,
    width: 650,
  });

  // 设置表单
  const [dataForm, { submit, setFieldsValue, getFieldsValue, resetFields }] = useForm({
    layout: 'Horizontal',
    colProps: { span: 24 },
    labelWidth: 80, // label 宽度
    schemas,
  });

  //提交
  async function okModal() {
    const formRes = await submit();
    if (formRes) {
      setSubLoading(true);
      const { isEdit, record } = props;
      const data = {
        ...record,
        ...getFieldsValue(), // 合并表单属性的值
      };
      if (!isEdit) {
        api.create(data).then(() => {
          ElMessage.success('创建成功');
          setSubLoading(false);
          resetFields();
          closeModal();
        });
      } else {
        api.update(data).then(() => {
          ElMessage.success('更新成功');
          setSubLoading(false);
          resetFields();
          closeModal();
        });
      }
    } else {
      ElMessage.error('验证失败，请填写完整信息');
      setSubLoading(false);
    }
  }

  //导出方法
  defineExpose({
    openModal,
    closeModal,
    setFieldsValue,
    setProps,
    resetFields,
  });
</script>
